{{extend './layout.htm'}}

{{block 'header'}}
<div class="container jumbotron">
    <h1 class="text-2xl">{{site.webname}}</h1>
    <p class="text-xl">{{site.description}}</p>
</div>
{{/block}}

{{block 'content'}}
<div class="container max-w-screen-xl mx-auto mt-4 flex-grow px-5 lg:px-0" id="content">
    <div class="lg:mx-5">
        <div class="grid grid-cols-3 gap-4">
            <div class="col-span-3 lg:col-span-2 mb-3">
                <h2 class="text-4xl dark:text-white"></h2>

                {{each list item}}
                <a href="{{url(':article', {id: item.id})}}">
                    <div
                        class="bg-white w-full p-3 lg:max-w-full lg:flex mt-5 transform hover:-translate-y-1 hover:shadow-md duration-500 dark:bg-warmgray-900">
                        {{@item.thumb && '<img class="lg:w-auto lg:h-44" src="'+item.thumb+'" />'}}
                        <div class="relative pl-4 p-2 justify-between leading-normal max-w-full w-full">
                            <div class="text-gray-900 font-bold text-xl mb-2 dark:text-white">{{item.title}}</div>
                            <p class="text-gray-700 text-base pb-5 dark:text-gray-300">{{item.description}}</p>
                            <p class="text-sm text-gray-600 absolute items-center right-0 bottom-0 dark:text-gray-400">
                                <span class="icon-access_keyword mr-1"></span>关键词: {{item.keywords}}
                                <span class="icon-access_view mr-1"></span>浏览:{{item.click}}
                                <time><span class="icon-access_time mr-1"></span>{{item.add_time | dateFormat
                                    'YYYY-mm-dd'}}</time>
                            </p>
                        </div>
                    </div>
                </a>
                {{/each}} 
                {{@pagination}} 

            </div>
            {{include './aside.htm'}}

        </div>
    </div>
</div>


{{if friend_links}}
<div class="bg-gray-800 text-white">
    <div class="container  max-w-screen-xl mx-auto mt-4  px-5 lg:px-0">
        
        <div class="friend-links">友情链接：{{each friend_links item}}<a href="{{item.url}}"
                target="_blank">{{item.title}}</a>{{/each}}</div>
    </div>
</div>
{{/if}}
{{/block}}